<template>
  <div>
    <el-container>

      <!--      头部-->
      <el-header>
        <div class="headerTitle">新闻管理系统
          <router-link to="/">新闻网</router-link>
        </div>
        <div class="headerUser">
          <span class="el-icon-user-solid"></span>
          <span>{{username}}</span>
          <el-button class="logout" @click="logout" size="mini">退出登录</el-button>
        </div>
      </el-header>


      <el-container>
        <!--      导航-->
        <el-aside width="15%">
          <el-menu
                  :default-active="path"
                  class="el-menu-vertical-demo"
                  background-color="#304156"
                  text-color="#fff"
                  active-text-color="#ffd04b">
            <router-link to="/user">
              <el-menu-item index="/user">
                <i class="el-icon-user"></i>
                <span slot="title">账号管理</span>
              </el-menu-item>
            </router-link>
            <router-link to="/news">
              <el-menu-item index="/news">
                <i class="el-icon-camera-solid"></i>
                <span slot="title">新闻管理</span>
              </el-menu-item>
            </router-link>
            <router-link to="/comments">
              <el-menu-item index="/comments">
                <i class="el-icon-s-comment"></i>
                <span slot="title">评论管理</span>
              </el-menu-item>
            </router-link>
          </el-menu>
        </el-aside>

        <!--      内容-->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        activeIndex: '/user',
        username: ''
      }
    },
    computed: {
      path() {
        if (this.$route.path === '/editingNews') {
          return '/news'
        } else {
          return this.$route.path
        }
      }
    },
    created() {
      if (window.sessionStorage.getItem('adminToken')) {
        this.username = JSON.parse(window.sessionStorage.getItem('userInfo')).username
      }
    },
    methods: {
      logout() {
        window.sessionStorage.clear()
        location.reload()
      }
    }
  }
</script>

<style scoped lang="less">
  .el-header {
    background: #2B2F3A;
    line-height: 60px;
    font-size: 18px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .headerTitle {
      a {
        color: white;
        font-size: 14px;
        margin-left: 15px;
        padding: 2px 5px;
        border: 1px solid #fff;
        border-radius: 3px;
      }

      a:hover {
        border: 1px solid orangered;
        color: orangered;
      }
    }

    .headerUser {
      color: white;

      .logout {
        background: none;
        font-size: 14px;
        margin-left: 5px;
        border-radius: 5px;
        color: white;
      }
    }
  }

  .el-container {
    height: 100vh;

    .el-aside {
      color: white;

      .el-menu {
        height: 100%;
      }
    }
  }

</style>